<script lang="ts" setup>
interface IProps {
  data: IGoodsAdditionalInfo;
}

type EmitEvents = {
  (event: 'change', payload: { value: string }): void;
};

const props = defineProps<IProps>();
const emits = defineEmits<EmitEvents>();
const data = ref<IGoodsAdditionalInfo>(props.data);

watch(
  () => props.data,
  (watchData) => {
    data.value = watchData;
  },
);

const radioGroupList = computed(() => {
  return JSON.parse(data.value.fieldOptions).map((_item: any) => {
    return { text: _item.name || _item, value: _item.id ? _item.id.toString() : _item };
  });
});
</script>

<template>
  <van-cell :title="data.attrName" :required="data.requiredFlag">
    <van-radio-group :value="data.value" @change="emits('change', { value: $event.detail })">
      <van-radio :checked-color="'#ffc300'" :name="_item.value" v-for="(_item, index) in radioGroupList" :key="index">{{ _item.text }}</van-radio>
    </van-radio-group>
  </van-cell>
</template>
